<template>
  <el-main style="padding-top: 5rem">

    <tr>
      <iframe src="https://hub.realibox.com/viewer/model/2359907927745102034/2390655021952794714/share?version=1"
              width='320' height='320' frameborder='no' allowfullscreen='true'></iframe>
    </tr>
    <tr>
      <iframe src="https://hub.realibox.com/viewer/model/2359907927745102034/2390656994917744730/share?version=1"
              width='320' height='320' frameborder='no' allowfullscreen='true'></iframe>
    </tr>

<!--    <tr>-->
<!--      <iframe-->
<!--        id="iframeContain"-->
<!--        name="iframeContain"-->
<!--        style="width:20rem; height: 10rem"-->
<!--        seamless-->
<!--        scrolling="yes"-->
<!--        :src="iframeURL"-->
<!--      >-->
<!--        您当前的浏览器不支持页面上的功能，请升级您当前的浏览器版本或使用谷歌浏览器访问当前页面-->
<!--      </iframe>-->
<!--    </tr>-->

    <div id="pdf">
      <pdf :src="path" :page="currentPage" @progress="loadedRatio = $event" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler" ref="wrapper" class="pdf">
        <!--      :src="pdfUrl">-->
      </pdf>
      <ul class="footers">
        <li :class="{select:idx==3}" @touchstart="idx=3" @touchend="idx=-1" @click="changePdfPage(1)">
          <p>下一页</p>
        </li>
        <li :class="{select:idx==2}" @touchstart="idx=2" @touchend="idx=-1" @click="changePdfPage(0)">
          <p>上一页</p>
        </li>
      </ul>
    </div>
  </el-main>


</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: "Manufacturing",
  components: {
    pdf
  },
  data() {
    return {
      iframeURL: "https://hub.realibox.com/public/2359907928440307795",
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      // path: this.$route.params.path,
      //服务器路径
      // path: "../../../static/Elasticsearch搜索技术（搜索排名算法、地理位置排序）.pdf",
      // path: "static/Elasticsearch搜索技术（搜索排名算法、地理位置排序）.pdf",
      path: "",
      scale: 100, //放大系数
      idx: -1,
      clauseTitle: "",
      loadedRatio: 0
      // txt: '',
      //
      // detailData:
      //   {
      //     goods_introduce: "Apple Watch Series 8 搭载全新的64位双核处理器 S8 ，性能相比上一代产品提升约15%；采用全天候视网膜显示屏，材质为LTPO OLED，支持1000nit全局峰值亮度；同样有GPS版本和蜂窝网络版本，蜂窝版本在侧面圆形控制键上依然会有红色标志。",
      //   },
      // detailPic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2022%252F0907%252Fcf9ff093j00rhspv70019c000sg00g8g.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665122603&t=83aa5ef522d434d285a24b866e18ab36",
      // options: {},
      // config: {
      // },
      // timer: null
    }
  },
  methods: {
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      if(val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if(val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1; // 加载的时候先加载第一页
    },
    //放大
    scaleD() {
      this.scale += 5;
      // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
    },

    //缩小
    scaleX() {
      if(this.scale == 100) {
        return;
      }
      this.scale += -5;
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
      // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
    },
    showDoc(params){
    }
  },
  created() {
    // var docName = this.$route.query.params;
    var docName = "CN114253121A";
    //生产路径
    // this.path = "static/"+docName+".pdf";
    //新路径
    // this.path = "static/src-pdf/"+docName+".pdf";

    //本地路径1，在static下可以读取，在assets下不可阅读
    this.path = "../../../static/"+docName+".pdf";

  }
}
</script>

<style scoped>
#iframeContain{ width: 15rem; height: 10rem; }
.el-textarea__inner{
  font-family: "Microsoft YaHei";
  size: 1rem;
  font-size: 15px;
}
</style>
